<template lang="pug">
div
  nav-div
    .item(slot="search")
      search-input(
        :keyword.sync="keyword",
        :load="loadFn",
      )
  div
    //- order(v-bind:id="id")
    template(v-if="!keyword && !user_id")
      .ui.grid.middle.aligned
        .two.wide.column
          .ui.vertical.fluid.tabular.menu
            a.item(v-bind:class="{ active: action === 'waiting_for' }", @click="action = 'waiting_for'") 待处理
            a.item(v-bind:class="{ active: action === 'processing' }", @click="action = 'processing'") 进行中
            a.item(v-bind:class="{ active: action === 'archived' }", @click="action = 'archived'") 已归档
        .fourteen.wide.column(v-if="['waiting_for'].includes(action)")
          .ui.grid.equal.width
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'created' }", @click="status = status === 'created' ? null : 'created'")
                  .ui.small.statistic
                    .value {{ statistics.waiting_for.created }}
                    .label 新订单
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'cancel_pending' }", @click="status = status === 'cancel_pending' ? null : 'cancelled'")
                  .ui.small.statistic
                    .value {{ statistics.waiting_for.cancel_pending }}
                    .label 取消申请
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'returning' }", @click="status = status === 'returning' ? null : 'returning'")
                  .ui.small.statistic
                    .value {{ statistics.waiting_for.returning }}
                    .label 试戴品归还

            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'reviewing' }", @click="status = status === 'reviewing' ? null : 'reviewing'")
                  .ui.small.statistic
                    .value {{ statistics.waiting_for.reviewing }}
                    .label 专业回访
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'aftermarket' }", @click="status = status === 'aftermarket' ? null : 'aftermarket'")
                  .ui.small.statistic
                    .value {{ statistics.waiting_for.aftermarket }}
                    .label 售后处理
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'inputing_report' }", @click="status = status === 'inputing_report' ? null : 'inputing_report'")
                  .ui.small.statistic
                    .value {{ statistics.waiting_for.inputing_report }}
                    .label 待输入处方
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'reviewing_report' }", @click="status = status === 'reviewing_report' ? null : 'reviewing_report'")
                  .ui.small.statistic
                    .value {{ statistics.waiting_for.reviewing_report }}
                    .label 待核对处方
        .ten.wide.column(v-if="['processing'].includes(action)")
          .ui.grid.equal.width
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'buy' }", @click="status = status === 'buy' ? null : 'buy'")
                  .ui.small.statistic
                    .value {{ statistics.processing.buy }}
                    .label 购买
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'try' }", @click="status = status === 'try' ? null : 'try'")
                  .ui.small.statistic
                    .value {{ statistics.processing.try }}
                    .label 试戴
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'optometry' }", @click="status = status === 'optometry' ? null : 'optometry'")
                  .ui.small.statistic
                    .value {{ statistics.processing.optometry }}
                    .label 验光
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'optometry_try' }", @click="status = status === 'optometry_try' ? null : 'optometry_try'")
                  .ui.small.statistic
                    .value {{ statistics.processing.optometry_try }}
                    .label 验光+试戴
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'aftermarket' }", @click="status = status === 'aftermarket' ? null : 'aftermarket'")
                  .ui.small.statistic
                    .value {{ statistics.processing.aftermarket }}
                    .label 售后
        .ten.wide.column(v-if="['archived'].includes(action)")
          .ui.grid.equal.width
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'buy' }", @click="status = status === 'buy' ? null : 'buy'")
                  .ui.small.statistic
                    .value {{ statistics.archived.buy }}
                    .label 购买
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'try' }", @click="status = status === 'try' ? null : 'try'")
                  .ui.small.statistic
                    .value {{ statistics.archived.try }}
                    .label 试戴
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'optometry' }", @click="status = status === 'optometry' ? null : 'optometry'")
                  .ui.small.statistic
                    .value {{ statistics.archived.optometry }}
                    .label 验光
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'optometry_try' }", @click="status = status === 'optometry_try' ? null : 'optometry_try'")
                  .ui.small.statistic
                    .value {{ statistics.archived.optometry_try }}
                    .label 验光+试戴
            .column
              .ui.secondary.menu
                .item.link(v-bind:class="{ active: status === 'cancelled' }", @click="status = status === 'cancelled' ? null : 'cancelled'")
                  .ui.small.statistic
                    .value {{ statistics.archived.cancelled }}
                    .label 取消

      .ui.section.divider
    .ui.grid
      .eight.wide.column
        .ui.checkbox
          input#all(type='checkbox')
          label.pointer(for="all") 全选
          //- data: {
          //-     users: [
          //-         { "id": "1", "name": "Shad Jast", "email": "pfeffer.matt@yahoo.com" },
          //-         { "id": "2", "name": "Duane Metz", "email": "mohammad.ferry@yahoo.com" },
          //-         { "id": "3", "name": "Myah Kris", "email": "evolkman@hotmail.com" },
          //-         { "id": "4", "name": "Dr. Kamron Wunsch", "email": "lenora95@leannon.com" }
          //-     ],
          //-     selected: []
          //- },
          //- computed: {
          //-     selectAll: {
          //-         get: function () {
          //-             return this.users ? this.selected.length == this.users.length : false;
          //-         },
          //-         set: function (value) {
          //-             var selected = [];
          //-
          //-             if (value) {
          //-                 this.users.forEach(function (user) {
          //-                     selected.push(user.id);
          //-                 });
          //-             }
          //-
          //-             this.selected = selected;
          //-         }
          //-
      //- .three.wide.column
      //-   .ui.floating.labeled.icon.dropdown.button
      //-     i.filter.icon
      //-     span.text 全部
      //-     .menu
      //-       .item 全部
      //-       .item 生产中
      .four.wide.column.right.aligned
        .ui.selection.dropdown 修改
          i.dropdown.icon
          .menu
            .item 删除
            .item 取消
      .four.wide.column.right.aligned
        .ui.selection.dropdown 导出
          i.dropdown.icon
          .menu
            .item 导出
            .item 导出
    .ui.divider
    table.ui.very.basic.table(v-infinite-scroll="load()", infinite-scroll-disabled="busy", infinite-scroll-distance="50")
      thead
        tr
          th &nbsp;
          th 订单号
          th 订单类型
          th 时间
          th 产品
          th 用户信息
          th 订单状态
          th 订单信息
      tbody
        tr(v-for="order in orders | orderBy 'id' -1", track-by="$index")
          td
            .ui.checkbox
              input(type='checkbox')
              label
          td
            a(v-link="{ name: 'order', params: { id: order.id } }", target="_blank") {{order.display_id}}
            //- a(href="javascript:void(0)", @click="showOrder") 071416346
          td {{order.category | orderCategory}}
          td {{moment.unix(order.created_at).format('YYYY-MM-DD, HH:mm')}}
          td
            a(v-link="{ name: 'product', params: { id: orderItem.product_id } }", target="_blank", v-for="orderItem in order.order_items")
              img.ui.mini.image(v-bind:src.sync="orderItem.thumbnail")
          td
            p {{order.name}}
            p {{order.phone}}
          td {{order.status | orderStatus order.category}}
          td {{order.info|json}}
            //- a(href='') 验光师
            //- p 2016-07-14, 20:12
    .ui.active.centered.inline.loader(v-if="isLoading")
</template>

<script>
import NavDiv from '../../modules/nav'
import SearchInput from '../../modules/semantic/search'
import Order from '../order'
import { getOrders } from '../../vuex/action'

export default {
  name: 'orders',
  components: {
    NavDiv,
    SearchInput,
    Order,
  },
  vuex: {
    getters: {
      orders: ({ order }) =>  order.orders.orders,
      statistics: ({ order }) =>  order.orders.statistics,
    },
    actions: {
      getOrders,
    }
  },
  data () {
    return {
      action: 'waiting_for',
      status: null,
      user_id: null,
      keyword: null,
      busy: false,
      page: 1,
      isLoading: false,
    }
  },
  route: {
    data ({ to: { query: { action, status, user_id }}}) {
      this.action = action || 'waiting_for'
      this.status = status
      this.user_id = user_id
      if (this.user_id) {
        this.helper.title(`用户 ${this.user_id} 的订单列表`)
      }
    }
  },
  created () {
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
    this.load()
  },
  methods: {
    loadFn() {
      this.$el.scrollTop = 0
      this.page = 1
      this.busy = false
      this.load()
    },
    load () {
      catchError(async () => {
        this.busy = true
        this.isLoading = true
        const result = await this.getOrders({
          page: this.page,
          q: this.keyword,
          action: (this.keyword||this.user_id) ? null : this.action,
          status: (this.keyword||this.user_id) ? null : this.status,
          user_id: this.user_id,
        })
        // return console.log(result.orders)
        if (!_.isEmpty(result.orders)) {
          this.page++
          this.busy = false
          this.isLoading = true
        } else {
          this.isLoading = false
        }
      })
    },
  },
  watch: {
    user_id: {
      handler (val, old) {
        this.status = null
        this.loadFn()
      },
      deep: true,
    },
    action: {
      handler (val, old) {
        this.status = null
        this.loadFn()
      },
      deep: true,
    },
    status: {
      handler (val, old) {
        this.loadFn()
      },
      deep: true,
    },
  },
}
</script>

<style lang="sass" scoped>
// .order
//   height: 100vh
//   z-index: 2
//   position: absolute
//   left: 50%
//   top: 0
//   padding: 50px 10px
//   overflow: scroll
//   background: white
</style>
